<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Recipe Form</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"
          th:href="@{/webjars/bootstrap/4.4.1/css/bootstrap.min.css}">

    <script src="/webjars/jquery/3.0.0/jquery.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"
            th:href="@{/webjars/bootstrap/4.4.1/js/bootstrap.min.js}"></script>
</head>
<body>
<!--/*@thymesVar id="recipes" type = "receipe.receipeproject.domain.Recipes"*/-->
<div class="container-fluid" style="margin-top: 20px">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form  th:object="${recipe}" th:action="@{/recipe/}"  method="post">
                <input type="hidden" th:field="*{id}"/>
                <div class="pannel-group">
                    <div class="panel panel-primary">
                        <div class="panel-heading bg-primary text-light">
                            <h1 class="panel-title">Edit Recipe Information</h1>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>Recipe Description:</label>
                                    <input type="text" class="form-control" th:field="*{description}"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>Categories:</label>
                                </div>
                                <div class="col-md-9 form-group">
                                    <div class="radio">
                                        <label>
                                            <input type="checkbox" value=""/>
                                            Cat 1
                                        </label>
                                    </div>
                                    <div class="radio" th:remove="all">
                                        <label>
                                            <input type="checkbox" value=""/>
                                            Cat 2
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>Prep Time:</label>
                                    <input type="text" class="form-control" th:field="*{prepTime}"/>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>Cooktime:</label>
                                    <input type="text" class="form-control" th:field="*{cockTime}"/>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>Difficulty:</label>
                                    <select class="form-control">
                                        <option>Easy</option>
                                        <option>Medium</option>
                                        <option>Hard</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>Servings:</label>
                                    <input type="text" class="form-control" th:field="*{servings}"/>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>Source:</label>
                                    <input type="text" class="form-control" th:field="*{source}"/>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>URL:</label>
                                    <input type="text" class="form-control" th:field="*{url}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading bg-primary text-light">
                            <div class="row">
                                <div class="col-md-11 ">
                                    <h1 class="panel-title">Ingredients</h1>
                                </div>
                                <div class="col-md-1">
                                    <a class="btn btn-toolbar" href="#" role="button" >Edit</a>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <ul>
                                        <li th:remove="all">1 Cup of milk</li>
                                        <li th:remove="all">1 Teaspoon of chocolate</li>
                                        <li th:each="ingredient : ${recipe.ingredients}"
                                            th:text="${(ingredient.getAmount() +
                                        ' ' + ingredient.unitOfMeasure.getDescription() +
                                        ' - ' + ingredient.getDescription())}">1 Teaspoon of Sugar
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading bg-primary text-light">
                            <h1 class="panel-title">Directions</h1>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <textarea class="form-control" rows="3" th:field="*{directions}"></textarea></div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading bg-primary text-light">
                            <h1 class="panel-title">Notes</h1>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <textarea class="form-control" rows="3" th:field="*{notes.recipeNotes}"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
